<template>
  <view class="dispatch">
    <u-navbar leftText="运营调度管理" @leftClick="handleLeftClick">
      <view class="dispatch_bar" slot="right">
        <view class="ship-name" @click="handleShipShow"> 船名 </view>
        <uni-datetime-picker
          class="time"
          type="date"
          @change="handleTimeChange"
        >
          日期
        </uni-datetime-picker>
      </view>
    </u-navbar>
    <view class="dispacth_container">
      <view class="card">
        <view class="col">
          <view class="label"> 日期 </view>
          <view class="value"> {{ time }} </view>
        </view>
        <view class="col bt">
          <view class="left">
            <view class="label"> 制度 </view>
            <view class="value">
              {{ hourType === 0 ? '12小时制度' : '24小时制度' }}
            </view>
          </view>
          <view class="right" v-if="hourType === 0">
            <u-radio-group v-model="radiovalue" @change="groupChange">
              <u-radio
                :customStyle="{ paddingRight: '10rpx' }"
                v-for="(item, index) in radiolist"
                :key="index"
                :label="item.name"
                :name="item.name"
              >
              </u-radio>
            </u-radio-group>
          </view>
        </view>
        <view class="col">
          <view class="label"> 班组 </view>
          <view class="value"> {{ dataList.groupCode }} </view>
        </view>
      </view>
      <template
        v-if="dataList['appPlanListVOs'] && dataList.appPlanListVOs.length > 0"
      >
        <view
          class="dispatch_table"
          v-for="item in dataList.appPlanListVOs"
          :key="item.shippingId"
        >
          <view class="table_head">
            {{ item.shippingName + '(' + (item.shipTimeSlot || '-') + ')' }}
          </view>
          <view
            class="col"
            v-for="(person, index) in item.appMarinerPlanVOList"
            :key="index"
          >
            <view class="half"> {{ person.marinerPost }} </view>
            <view class="half"> {{ person.marinerName || '-' }} </view>
          </view>
        </view>
      </template>
      <u-empty style="paddingTop:150rpx" v-else> </u-empty>
    </view>
    <u-picker
      :show="shipShow"
      :columns="columns"
      @cancel="handleShipShow"
      @confirm="handlePickerConfirm"
    ></u-picker>
  </view>
</template>

<script>
// 班次类型 0-白班 1-晚班
import {
  getHourType,
  get24PlanList,
  get12PlanList,
  getShipList,
} from '@/api/alarm'
export default {
  data() {
    return {
      shipShow: false,
      columns: [],
      /** 船舶列表 */
      shipList: [],
      currentShipId: '',
      radiovalue: '白班',
      radiolist: [
        {
          name: '白班',
          value: 0,
        },
        {
          name: '夜班',
          value: 1,
        },
      ],
      time: '',
      /** 当前排班类型  0-12小时  1-24小时 */
      hourType: 0,
      /**班组选中的值 */
      currentWorkType: 0,
      /** 列表数据 */
      dataList: {},
    }
  },
  mounted() {
    getShipList({}).then((res) => {
      this.shipList = res
      let rs = res.map((v) => v.shipName)
      rs.unshift('全部')
      this.columns = [rs]
    })
    getHourType({}).then((res) => {
      this.hourType = res
      this.time = this.getNowFormatDate()
      this.query(this.time)
    })
  },
  methods: {
    getNowFormatDate() {
      let date = new Date(),
        seperator1 = '-', //格式分隔符
        year = date.getFullYear(), //获取完整的年份(4位)
        month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
        strDate = date.getDate() // 获取当前日(1-31)
      if (month >= 1 && month <= 9) month = '0' + month // 如果月份是个位数，在前面补0
      if (strDate >= 0 && strDate <= 9) strDate = '0' + strDate // 如果日是个位数，在前面补0

      let currentdate = year + seperator1 + month + seperator1 + strDate
      return currentdate
    },
    query(planDate) {
      uni.showLoading({
        title: '加载中',
      })
      let params = {
        planDate,
        shippingId: this.currentShipId,
      }
      if (this.hourType === 0) {
        // 12小时
        params.shiftType = String(this.currentWorkType)
        get12PlanList(params).then((res) => {
          this.dataList = res
          uni.hideLoading()
        })
      } else {
        get24PlanList(params).then((res) => {
          console.log(res)
          this.dataList = res
          uni.hideLoading()
        })
      }
    },
    handleLeftClick() {
      uni.navigateBack()
    },
    groupChange(n) {
      this.currentWorkType = this.radiolist.find((item) => item.name === n)[
        'value'
      ]
      this.query(this.time)
    },
    /** 日历时间选择 */
    handleTimeChange(v) {
      this.time = v
      this.query(v)
    },
    handleShipShow() {
      this.shipShow = !this.shipShow
    },
    handlePickerConfirm(v) {
      console.log(v)
      let index = v['indexs'][0]
      if (index === 0) {
        this.currentShipId = ''
      } else {
        this.currentShipId = this.shipList[index - 1]['shippingId']
      }
      this.query(this.time)
      this.shipShow = !this.shipShow
    },
  },
}
</script>

<style lang="scss" scoped>
.dispatch {
  background: $uni-bg-color;
  min-height: 100vh;
}
.dispatch_bar {
  display: flex;
  color: $uni-color-primary;
  .ship-name {
    padding: 0 10rpx;
  }
  .time {
    padding: 0 10rpx;
  }
}
.dispacth_container {
  padding: 180rpx 30rpx 0;
  .card {
    background: #fff;
    margin-top: 20rpx;
    padding: 20rpx 30rpx;
    border-radius: 8rpx;
    @include shadow();
    .col {
      padding: 10rpx 0;
      display: flex;
      .left {
        display: flex;
      }
      .label {
        padding: 0 10rpx 0 0;
      }
    }
    .bt {
      justify-content: space-between;
    }
  }
  .dispatch_table {
    margin: 20rpx 0;
    padding: 0 20rpx;
    .table_head {
      background: #517bb1;
      padding: 20rpx 20rpx;
      color: #fff;
    }
    .col {
      display: flex;
      padding: 10rpx 0;
    }
    .half {
      width: 50%;
      text-align: center;
    }
  }
}
</style>
